<template>
	<view style="height: 750rpx;transform-origin: left top;transform: translate(100%, 0) rotate(90deg)"><l-f2 ref="chart"></l-f2></view>
</template>

<script>
import F2 from '@antv/f2';
export default {
	data() {
		return {};
	},
	async mounted() {
		const data = await this.getData();
		this.$refs.chart.init(config => {
			const chart = new F2.Chart(config);
			chart.source(data);
			chart.landscape(true);
			chart.scale('date', {
				range: [0, 1],
				type: 'timeCat',
				tickCount: 3
			});
			chart.scale('value', {
				tickCount: 5
			});
			chart.axis('date', {
				label: function label(text, index, total) {
					// 只显示每一年的第一天
					const textCfg = {
						fill: '#ccc'
					};
					if (index === 0) {
						textCfg.textAlign = 'left';
					} else if (index === total - 1) {
						textCfg.textAlign = 'right';
					}
					return textCfg;
				}
			});
			chart.axis('value', {
				label: {
					fill: '#cccccc'
				}
			});
			chart.legend({
				nameStyle: {
					fill: '#333333'
				},
				valueStyle: {
					fill: '#e8541e'
				}
			});
			chart.tooltip({
				custom: true, // 自定义 tooltip 内容框
				crosshairsStyle: {
					stroke: '#108ee9',
					lineDash: [4, 4]
				},
				onChange: function onChange(obj) {
					const legend = chart.get('legendController').legends.top[0];
					const tooltipItems = obj.items;
					const legendItems = legend.items;
					const map = {};
					legendItems.forEach(function(item) {
						map[item.name] = item;
					});
					tooltipItems.forEach(function(item) {
						const name = item.name;
						const value = item.value;
						if (map[name]) {
							map[name].value = value;
						}
					});
					legend.setItems(Object.values(map));
				},
				onHide: function onHide() {
					const legend = chart.get('legendController').legends.top[0];
					legend.setItems(chart.getLegendItems().country);
				}
			});
			chart
				.line()
				.position('date*value')
				.color('type', ['#1677FF', '#00B7F4', '#FF9F18'])
				.size('type', [1.5, 1, 1]);
			chart
				.area()
				.position('date*value')
				.color('type', ['l(90) 0:#1677ff 1:#FFFFFF', 'transparent', 'transparent']);

			chart.render();
			return chart;
		});
	},
	methods: {
		getData() {
			return new Promise(resolve => {
				uni.request({
					url: `https://gw.alipayobjects.com/os/antfincdn/OVMtvjbnut/series-line.json`,
					success: res => {
						resolve(res.data);
					}
				});
			});
		}
	}
};
</script>